<template>
  <el-table border :data="tableData" style="width: 100%;" height="400">
    <el-table-column type="selection" width="45" align="center"></el-table-column>
    <el-table-column prop="date" label="报销编号">
      <template slot-scope="scope">
        <el-tooltip effect="light" :content="scope.row.contractNumber">
          <div class="el-table-text link" @click="showDrawer2(2)">{{ 'BX00' + scope.$index + 1 }}</div>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="报销类型">
      <template slot-scope="scope">
        <el-tooltip effect="light" :content="scope.row.reason">
          <div class="el-table-text">{{ scope.row.reason }}</div>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="报销金额">
      <template slot-scope="scope">
        <div class="el-table-text flex-row-a-center">
          <div class="text-theme-2">￥{{ scope.row.amount }}</div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="报销凭证" width="80">
      <template slot-scope="scope">
        <div class="el-table-text text-theme-4 pointer">查看</div>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="关联订单">
      <template slot-scope="scope">
        <el-tooltip effect="light" :content="scope.row.contractNumber">
          <div class="el-table-text link">{{ 'DD00' + scope.$index + 1 }}</div>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="关联客户">
      <template slot-scope="scope">
        <el-tooltip effect="light" :content="scope.row.customerName">
          <div class="el-table-text link" @click="showDrawer2(1)">{{ scope.row.customerName }}</div>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="报销人员">
      <template slot-scope="scope">
        <el-tooltip effect="light" :content="scope.row.contactName">
          <div class="el-table-text">{{ scope.row.contactName }}</div>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="提交日期">
      <template slot-scope="scope">
        <el-tooltip effect="light" :content="scope.row.createTime">
          <div class="el-table-text">{{ scope.row.createTime }}</div>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="操作" fixed="right" width="65" align="center">
      <template slot-scope="scope">
        <div class="cz-frame">
          <div class="cz-item link" @click="lookData(scope.row)">
            详情
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "Table1",
  data() {
    return {
      tableData: []
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    getList() {
      this.tableData = [
        {
          "contractNumber": "SO123",
          "customerName": "华联科技有限公司",
          "contactName": "张三",
          "contactPhone": "13812345678",
          "amount": "1000.00",
          "createTime": "2023-10-26",
          "dept": "研发部",
          "totalAmount": "1500.00",
          "reimbursedAmount": "500.00",
          "reason": "项目出差交通费",
          "status": "1"
        },
        {
          "contractNumber": "SO456",
          "customerName": "盛世集团",
          "contactName": "李四",
          "contactPhone": "15812345678",
          "amount": "500.00",
          "createTime": "2023-11-01",
          "dept": "市场部",
          "totalAmount": "750.00",
          "reimbursedAmount": "300.00",
          "reason": "客户拜访招待费",
          "status": "1"
        },
        {
          "contractNumber": "SO789",
          "customerName": "天宇公司",
          "contactName": "王五",
          "contactPhone": "18912345678",
          "amount": "200.00",
          "createTime": "2023-11-15",
          "dept": "财务部",
          "totalAmount": "300.00",
          "reimbursedAmount": "150.00",
          "reason": "办公用品采购",
          "status": "2"
        },
        {
          "contractNumber": "SO101",
          "customerName": "星河科技",
          "contactName": "赵六",
          "contactPhone": "13512345678",
          "amount": "800.00",
          "createTime": "2023-12-08",
          "dept": "人事部",
          "totalAmount": "1200.00",
          "reimbursedAmount": "400.00",
          "reason": "员工培训费用",
          "status": "2"
        },
        {
          "contractNumber": "SO112",
          "customerName": "海天集团",
          "contactName": "孙七",
          "contactPhone": "18612345678",
          "amount": "300.00",
          "createTime": "2023-12-22",
          "dept": "行政部",
          "totalAmount": "450.00",
          "reimbursedAmount": "200.00",
          "reason": "会议室租赁费用",
          "status": "1"
        },
        {
          "contractNumber": "SO134",
          "customerName": "龙腾科技",
          "contactName": "周八",
          "contactPhone": "13912345678",
          "amount": "150.00",
          "createTime": "2024-01-05",
          "dept": "销售部",
          "totalAmount": "225.00",
          "reimbursedAmount": "100.00",
          "reason": "客户赠送礼品",
          "status": "1"
        },
        {
          "contractNumber": "SO156",
          "customerName": "银河科技",
          "contactName": "吴九",
          "contactPhone": "15012345678",
          "amount": "700.00",
          "createTime": "2024-01-19",
          "dept": "技术部",
          "totalAmount": "1050.00",
          "reimbursedAmount": "350.00",
          "reason": "项目研发材料费",
          "status": "3"
        },
        {
          "contractNumber": "SO178",
          "customerName": "天马公司",
          "contactName": "郑十",
          "contactPhone": "18712345678",
          "amount": "400.00",
          "createTime": "2024-02-02",
          "dept": "运营部",
          "totalAmount": "600.00",
          "reimbursedAmount": "250.00",
          "reason": "广告宣传费用",
          "status": "2"
        },
        {
          "contractNumber": "SO190",
          "customerName": "北斗科技",
          "contactName": "李七",
          "contactPhone": "13612345678",
          "amount": "250.00",
          "createTime": "2024-02-16",
          "dept": "客服部",
          "totalAmount": "375.00",
          "reimbursedAmount": "175.00",
          "reason": "客户服务电话费",
          "status": "2"
        },
        {
          "contractNumber": "SO212",
          "customerName": "华强集团",
          "contactName": "王八",
          "contactPhone": "18812345678",
          "amount": "600.00",
          "createTime": "2024-03-01",
          "dept": "设计部",
          "totalAmount": "900.00",
          "reimbursedAmount": "400.00",
          "reason": "设计软件购买",
          "status": "3"
        }
      ]
    },
    lookData() {
      this.$router.push({
        path: '/sale/order',
        params: {
          id: 1,
        },
        query: {
          id: 1
        }
      })
    }
  }
}
</script>
